<template>
  <div>
    <el-card shadow="never">
      <!-- 时间选择 -->
      <el-date-picker
        v-model="value1"
        clearable
        type="yearrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
      />

      <div class="main-card">
        <h3>我是 DEMO ++</h3>
        <el-button
          type="primary"
          @click="() => {
            dialogVisible = true
          }"
        >打开弹层</el-button>

        <el-button
          type="info"
          @click="() => {
            drawer = true
          }"
        >
          打开抽屉
        </el-button>
      </div>
      <el-dialog
        custom-class="custom-x-dialog"
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
    <el-card class="mb-20" shadow="never">
      <el-table class="custom-x-table" :data="tableData" style="width: 100%" height="250">
        <el-table-column fixed prop="date" label="日期" width="150" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="province" label="省份" width="120" />
        <el-table-column prop="city" label="市区" width="120" />
        <el-table-column prop="address" label="地址" width="300" />
        <el-table-column prop="zip" label="邮编" width="120" />
      </el-table>
      <div id="chart" style="height:400px" />
    </el-card>

    <el-drawer
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <span>我来啦!</span>
    </el-drawer>

  </div>
</template>
<script>
// @ is an alias to /src
import dayjs from 'dayjs'
import _ from 'lodash'
import Chart from '@/utils/chart'
import resizeHandler from '@/mixin/resizeHandler'
export default {
  mixins: [resizeHandler],
  data() {
    return {
      value1: '',
      // 图表[chart__obj]响应约定俗称
      chart__obj: {
        chart1: {}
      },
      dialogVisible: false,
      drawer: false,
      tableData: Array.from({ length: 15 }, () => {
        return {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      })
    }
  },
  mounted() {
    this.chart__obj.chart1 = new Chart({
      el: '#chart',
      type: 'line'
    }).source({
      xData: [1, 2, 3, 4, 5, 6, 7],
      series: [{
        name: '销量',
        data: Array.from({ length: 6 }, () => {
          return String(Math.random()).slice(-2)
        })
      }]
    })
  }
}
</script>

<style lang="scss">

</style>
